<template>
  <div class="ppp-wrap">
    <colorTitle title="中视财华与PPP" desc="CCTVCH with PPP"></colorTitle>
    <div class="ppp">
      <div class="ppp-inner">
        <ul class="ppp-list flex flex-wrap" :style="{height:state.height+'px'}">
          <li class="ppp-item" v-for="item in pppList" :key="item.id">
            <div class="ppp-img">
              <img class="img" :src="item.cover_url" alt="" />
            </div>
            <div class="ppp-text">
              <h3 class="text-ellipsis font-m font-normal">
                <span class="ppp-title">{{ item.title }}</span>
              </h3>
              <p class="ppp-tips text-ellipsis font-sm">
                {{ item.tips }}
              </p>
              <div class="ppp-person text-more-ellipsis font">
                {{ item.introduce }}
              </div>
              <router-link :to="item.url" class="item-more">
                <div class="icon arrow">
                  <svg
                    t="1511314697872"
                    style=""
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    width="32"
                    height="32"
                  >
                    <path
                      d="M347.526 657.92c7.68 7.68 7.68 20.48 0 28.16s-20.48 7.68-28.16 0l-160-160c-7.68-7.68-7.68-20.48 0-28.16l160-160c7.68-7.68 20.48-7.68 28.16 0s7.68 20.48 0 28.16L221.758 491.837h628.479c11.203 0 20.163 8.96 20.163 20.163s-8.96 20.163-20.163 20.163H221.439L347.524 657.92z"
                    ></path>
                  </svg>
                </div>
              </router-link>
            </div>
          </li>
        </ul>
        <div class="more-btn" @click="loadingMore">
          <img
            src="@/assets/images/ppp/bottom.png"
            alt=""
            v-if="!state.isDown"
          />
          <img src="@/assets/images/ppp/top.png" alt="" v-else />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import colorTitle from "./colorTitle.vue";
import ArrowVue from "@/components/icon/Arrow.vue";

import { reactive, toRefs } from "vue";

const props = defineProps({
  pppList: {
    type: Array as any,
    default: [] as any,
  },
});
const { pppList }:any = toRefs(props);

const state = reactive({
  isDown: false as any,
  height: "" as any,
});

// 加载更多
const loadingMore = () => {
  state.isDown = !state.isDown;
  if (pppList.value.length && state.isDown) {
    const row = Math.ceil(pppList.value.length / 3);
    state.height = row * 400;
    console.log(row);
  } else {
    state.height = 390;
  }
};
</script>

<style scoped>
.ppp::before {
  content: "";
  display: block;
  height: 286px;
  background: #f0f0f0;
}
.ppp-inner {
  position: relative;
  top: -240px;
  width: 1440px;
  margin: 0 auto;
}
.ppp-list {
  height: 390px;
  overflow:hidden;
  transition: all ease-out 0.3s;
}
.ppp-item {
  width: 450px;
  height: 370px;
  margin-bottom: 30px;
  margin-right: 45px;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}
.ppp-item:nth-child(3n) {
  margin-right: 0;
}
.ppp-img {
  width: 450px;
  height: 165px;
}
.img {
  /* display: block; */
  object-fit:cover;
  width: 100%;
  height: 100%;
  /* background: chocolate; */
  transition: all 0.36s ease;
}
.ppp-text {
  padding: 23px 20px;
}
.ppp-title {
  margin-bottom: 10px;
  background: linear-gradient(to right, #252086 0%, #e60012 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ppp-tips {
  margin-bottom: 15px;
}
.ppp-person {
  margin-bottom: 20px;
  height: 48px;
  line-height: 24px;
}
.item-more {
  display: block;
  width: 82px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #9195a3;
  border-radius: 10px;
  transition: all 0.36s ease;
}
.arrow {
  transform: rotate(180deg);
}
.item-more path {
  fill: #9195a3;
}

/* 鼠标滑上时 */
.ppp-item:hover {
  box-shadow: 0px 12px 12px 1px rgba(98, 102, 117, 0.15);
}
.ppp-item:hover .img {
  transform: scale(1.08);
}
.ppp-item:hover .item-more {
  margin-left: 10px;
  border-color: #fff;
  background-image: linear-gradient(
    to right,
    #3888ff,
    #6c71ff,
    #aa58fa,
    #fb6d86
  );
}
.ppp-item:hover .item-more path {
  fill: #fff;
}

/*加载更多*/
.more-btn {
  position: relative;
  margin: 0 auto;
  margin-top: 75px;
  width: 296px;
  height: 46px;
  line-height: 46px;
  display: block;
  font-size: 14px;
  text-align: center;
  border: #c6c6c6 1px solid;
  border-radius: 12px;
  transition: all ease-out 0.3s;
  cursor: pointer;
}
.more-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 296px;
  height: 46px;
  line-height: 46px;
  border: 2px solid #626675;
  opacity: 0;
  transition: all 0.5s ease 0s;
  margin: 0 auto;
  text-align: center;
  transform: scale(1, 1);
  margin-left: -3px;
  border-radius: 90px;
}

.more-btn:hover {
  color: #5e5e5e;
  border-color: transparent;
}
.more-btn:hover::after {
  opacity: 1;
  transform: rotateX(180deg);
}
.more-btn img {
  display: inline-block;
  width: 19px;
  height: 14px;
}
</style>
